<!--
  -- Copyright 2013 The Chromium Authors. All rights reserved.
  -- Use of this source code is governed by a BSD-style license that can be
  -- found in the LICENSE file.
  -->

<polymer-element name="kb-key" extends="kb-key-base" attributes="image keyCode
    keyName shiftModifier sound stretch weight">
  <template>
    <style>
      :host {
        background-color: #3b3b3e;
        border-radius: 2px;
        border-style: solid;
        border-width: 1px 0px;
        color: #ffffff;
        font-family: roboto-bold;
        font-weight: 300;
      }

      :host .key {
        background-image: none;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        bottom: 0;
        height: 1.2em;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        text-align: center;
        top: 0;
      }

      :host([align=left]) .key {
        padding-left: 1em;
      }

      /* TODO(rsadam@): Remove when we fully switch to native shadow dom. */
      /* TODO(rsadam@): Move shift key rules to kb-shift-key. */
      kb-shift-key .key,
      :host(kb-shift-key) .key,
      :host([image]) .key {
        height: 70%;
        width: auto;
      }

      :host([image].cursor) .key {
        height: 85%;
      }

      :host([image].hide-keyboard) .key {
        height: 100%;
      }

      :host([image].search) .key {
        height: 80%;
      }

      :host .hint {
        color: #313131;
        font-size: 70%;
        position: absolute;
        right: 7%;
        top: 5%;
      }

      :host([invert]) .key {
        color: #313131;
      }

      :host([invert]) .hint {
        color: #ffffff;
      }

      :host(.dark) {
        font-size: 70%;
      }

      :host(.active) {
        -webkit-box-shadow: inset 0px 1px #969696, inset 0px -1px #6f6f6f;
        background-image: -webkit-linear-gradient(#8b8b8b, #7d7d7d);
        background-size: cover;
        border-bottom-color: #5b5b5b;
        border-top-color: #a4a4a4;
      }

      :host(.dark:not(.active)) {
        -webkit-box-shadow: inset 0px 1px #313131, inset 0px -1px #202020;
        background-color: #222222;
        border-bottom-color: #1c1c1c;
        border-top-color: #4f4f4f;
      }

      :host(:not(.dark):not(.active)) {
        -webkit-box-shadow: inset 0px 1px #6f6f6f, inset 0px -1px #565656;
        background-image: -webkit-linear-gradient(#636363, #5b5b5b);
        background-size: cover;
        border-bottom-color: #4a4a4a;
        border-top-color: #878787;
      }
    </style>
    <div id="key" class="key">
      <content></content>
    </div>
    <div class="hint" part="hint">{{hintText}}</div>
  </template>
</polymer-element>

<!-- Special keys -->
<polymer-element name="kb-abc-key" class="symbol dark" char="Invalid"
    extends="kb-key" weight="125">
</polymer-element>

<polymer-element name="kb-hide-keyboard-key" class="hide-keyboard dark"
    align="center" attributes="showMenu" char="Invalid" extends="kb-key">
</polymer-element>
